<template>
  <transition name="toast-fade" v-if="visible">
    <div
      class="toast-wrapper"
      :style="{ top: offset + 'px' }"
      :class="'toast-' + type"
    >
      <p class="toast-content">{{ content }}</p>
    </div>
  </transition>
</template>

<script>
export default {
  name: "Toast",
  data() {
    return {
      visible: true,
      content: "提示信息",
      type: "info",
      offset: 20,
      closed: undefined,
      duration: 1500,
    };
  },
  mounted() {
    setTimeout(() => {
      this.close();
    }, this.duration);
  },
  methods: {
    close() {
      if (typeof this.closed === "function") {
        this.visible = false;
        this.closed();
      }
    },
  },
};
</script>

<style>
.toast-wrapper {
  position: fixed;
  z-index: 999;
  border: 1px solid #aadaf7;
  background-color: #edf2fc;
  border-radius: 5px;
  padding: 15px 25px;
  min-width: 200px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.5s;
}
.toast-content {
  text-align: center;
  line-height: 1;
}

.toast-info .toast-content {
  color: #64b6e6;
}

.toast-success {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
}
.toast-success .toast-content {
  color: #67c23a;
}

.toast-warning {
  background-color: #fdf6ec;
  border-color: #faecd8;
}
.toast-warning .toast-content {
  color: #e6a23c;
}

.toast-error {
  background-color: #fef0f0;
  border-color: #fde2e2;
}
.toast-error .toast-content {
  color: #f56c6c;
}

.toast-fade-enter,
.toast-fade-leave-to {
  opacity: 0;
  transform: translate(-50%, -100%);
}
</style>
